<template>
    <div class="points-details-main">
        <Dialog :app-dialog="appDialog">
            <div>
                <ZwSearchForm :option="searchOption" @search="search" @reset="reset" />
                <ZwTable
                    ref="tableRef"
                    class="table-box"
                    :option="tableOption"
                    :row-key="getRowKey"
                    :param-prop="state.paramProp"
                    :fetch-params="state.searchParams"
                    :fetch-api="fetchApi()">
                </ZwTable>
            </div>
        </Dialog>
    </div>
</template>
<script setup lang="tsx">
import { ref, reactive, computed } from 'vue';
import { deepCopy } from '@/utils/helper';
import { ElMessage, ElButton } from 'element-plus';
import { getPointsRecord, getMemberChannelList } from '@/api/member/memberList/index';
import { getBusinessType } from '@/api/member/pointsManage/index';
import Dialog from '@/components/Dialog.vue';
import ZwSearchForm from '@/components/zw/search-form/SearchForm';
import ZwTable from '@/components/zw/table/Table';

const tableRef = ref<any>(null);

const cancelHandel = () => {
    appDialog.visible = false;
};

const submitHandel = () => {
    appDialog.visible = false;
};

const appDialog = reactive<any>({
    visible: false,
    title: '积分记录',
    width: '60%',
    submit: submitHandel,
    submitText: '关闭'
});

const searchOption = computed(() => {
    return [
        {
            label: '更新时间',
            name: 'record_time',
            value: [],
            type: 'datePicker',
            datePickerType: 'daterange',
            datePickerFormat: 'YYYY-MM-DD HH:mm:ss',
            valueFormat: 'YYYY-MM-DD HH:mm:ss',
            startPlaceholder: '开始日期',
            endPlaceholder: '结束日期'
        },
        {
            label: '类型',
            name: 'business_type',
            value: '',
            type: 'select',
            clearable: true,
            placeholder: '请选择类型',
            fetchOptionApi: () => {
                return new Promise(resolve => {
                    getBusinessType().then((res: any) => {
                        let list: any = [];
                        const data = res.map((v: any) => {
                            return {
                                id: v.val,
                                name: v.name
                            };
                        });
                        list = data || [];
                        resolve(list);
                    });
                });
            },
            formatOption: (v: any) => ({
                label: v.name,
                value: v.id
            })
        },
        {
            label: '来源渠道',
            name: 'channel_id',
            value: '',
            type: 'select',
            clearable: true,
            placeholder: '请选择来源渠道',
            fetchOptionApi: () => {
                return new Promise(resolve => {
                    getMemberChannelList().then((res: any) => {
                        let list: any = [];
                        const data = res.map((v: any) => {
                            return {
                                id: v.id,
                                name: v.name
                            };
                        });
                        list = res || [];
                        resolve(list);
                    });
                });
            },
            formatOption: (v: any) => ({
                label: v.name,
                value: v.id
            })
        },
        {
            label: '店铺名称',
            name: 'shop_name',
            value: '',
            type: 'input',
            clearable: true,
            placeholder: '请输入店铺名称'
        },
        {
            label: '备注',
            name: 'remark',
            value: '',
            type: 'input',
            clearable: true,
            placeholder: '请输入备注'
        }
    ];
});

const tableOption = [
    {
        prop: 'change_points',
        label: '变动值',
        render({ row, column, index }: any) {
            return (
                <div>
                    {' '}
                    {row.change_type == 1 ? '+' : '-'} {row.change_points}
                </div>
            );
        }
    },
    {
        prop: 'business_type_name',
        label: '类型'
    },
    {
        prop: 'business_sub_name',
        label: '名称'
    },
    {
        prop: 'channel_name',
        label: '来源渠道'
    },
    {
        prop: 'shop_name',
        label: '来源店铺',
        render({ row, column, index }: any) {
            return <div>{row.shop_name ? row.shop_name : '--'}</div>;
        }
    },
    {
        prop: 'remark',
        label: '备注',
        render({ row, column, index }: any) {
            return <div>{row.remark ? row.remark : '--'}</div>;
        }
    },
    {
        prop: 'created_at',
        width: '170',
        label: '更新时间'
    },
    {
        prop: 'created_user',
        label: '变更人',
        width: 120,
        render({ row, column, index }: any) {
            return <div>{row.created_user || '--'}</div>;
        }
    }
];

const defaultParams = {
    member_no: '',
    business_type: '',
    shop_name: '',
    shop_id: '',
    channel_id: '',
    record_time: []
};

const state = reactive({
    searchParams: deepCopy(defaultParams),
    paramProp: { page: 'page', pageSize: 'page_size' }
});

const getRowKey = (row: any) => {
    return row.id;
};

const search = (data: any) => {
    const member_no = state.searchParams.member_no;
    tableRef.value.getTable().clearSelection();
    state.searchParams = deepCopy({ ...defaultParams, ...data, member_no });
};

const reset = () => {
    const member_no = state.searchParams.member_no;
    tableRef.value.getTable().clearSelection();
    state.searchParams = deepCopy({ ...defaultParams, member_no });
};

const fetchApi = () => {
    return getPointsRecord;
};

defineExpose({
    appDialog,
    state
});
</script>
<style lang="scss" scoped>
.points-details-main {
}
</style>
